<!--
<template>
    <div>
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem href="#">新闻分类</BreadcrumbItem>
                <BreadcrumbItem href="#">上传分类</BreadcrumbItem>
                <BreadcrumbItem>产品分类</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Tree :data="list" :render="renderContent"></Tree>
    </div>

</template>
<script>
    export default {
        data () {
            return {
                list:[],
                
            }
        },
        methods: {
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('span', data.text)
                    ]),
                    
                ]);
            },
    
            getData(){//分离出来专门用于获取数据的
                this.$http.get('http://localhost:3000/cate/list')
                .then(res=>{
                    // console.log(res)
                    this.list = res.data;
                })
            }
        },
        created(){
            this.getData();
        }
    }
</script>
-->




<template>
    <div>
        <Tabs type="card">
            <TabPane label="新闻分类">
                <Tree :data="list" :render="renderContent"></Tree>
            </TabPane>
            <TabPane label="上传分类">上传分类的内容</TabPane>
            <TabPane label="产品分类">产品分类的内容</TabPane>
        </Tabs>
        
    </div>
    
</template>
<script>
    export default {
        data () {
            return {
                list:[
                    {
                        text: 'parent 1',
                        expand: true,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.text)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                }, [
                                    h('Button', {//添加根节点按钮
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: 'ios-plus-empty',
                                            type: 'primary'
                                        }),
                                        style: {
                                            width: '52px'
                                        },
                                        on: {
                                            click: () => { this.append(data) }
                                        }
                                    })
                                ])
                            ]);
                        }
                      
                    }
                
                ],
                modal:false,
                value:'',
                buttonProps: {//加减号的样式
                    type: 'ghost',
                    size: 'small',
                }
            }
        },
        methods: {
             renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('span', data.text)
                    ]),//数据的渲染
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {//添加按钮
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-plus-empty'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.append(data) }
                            }
                        }),
                        h('Button', {//删除按钮
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-minus-empty'
                            }),
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        })
                    ])
                ]);
            },
            
            append (data) {//添加节点
            console.log(data.parentId===true);
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.value,
                                autofocus: true,
                                placeholder: '请输入节点名字'
                            },
                            
                        })
                    }
                })
             
            },
            remove (root, node, data) {
                console.log(root,node,data)
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                parent.children.splice(index, 1);
            },
           

                
            getData(){//分离出来专门用于获取数据的
                 this.$http.get('http://localhost:3000/cate/list')
                .then(res=>{
                    // console.log(res)
                    this.list = res.data;
                })
            }
        },
        created(){
            this.getData();
        }
    }
</script>